<app-page-header [headerTitle]="headerTitle" [headerIcon]='headerIcon'></app-page-header>
<div id="home-page" class="container-fluid" (window:resize)="onResize($event)">

    <carousel-component [vendors]="vendors"></carousel-component>

    <popular-component></popular-component>

    <div class="row" [ngClass]="{'ready': showCards}">
        <div class="col-md-4">
            <div class="home-card" id="card-1">
                <pfng-card
                    [headerTemplate]="downloadHeader"
                    [config]="downloadConfig">
                    <ng-template #downloadHeader>
                        <div class="card-header">
                            <span class="header-icon"><i class="fa fa-download fa-2x"></i></span> <span class="header-text">Download</span>
                        </div>
                    </ng-template>
                    <div class="card-content" [innerHtml]="downloadContent"></div>
                </pfng-card>
            </div>
        </div>
        <div class="col-md-4">
            <div class="home-card" id="card-2">
                <pfng-card
                    [headerTemplate]="shareHeader"
                    [config]="shareConfig">
                    <ng-template #shareHeader>
                        <div class="card-header">
                            <span class="header-icon"><i class="fa fa-share-alt fa-2x"></i></span> <span class="header-text">Share</span>
                        </div>
                    </ng-template>
                    <div class="card-content" [innerHtml]="shareContent"></div>
                </pfng-card>
            </div>
        </div>
        <div class="col-md-4">
            <div class="home-card" id="card-3">
                <pfng-card
                    [headerTemplate]="featureHeader"
                    [config]="featureConfig">
                    <ng-template #featureHeader>
                        <div class="card-header">
                            <span class="header-icon"><i class="fa fa-star fa-2x"></i></span> <span class="header-text">Featured</span>
                        </div>
                    </ng-template>
                    <div class="card-content">
                        <div class="featured-blog">
                            <div class="featured-text" [innerHtml]="featuredBlogContent"></div>
                        </div>
                    </div>
                </pfng-card>
            </div>
        </div>
    </div>
</div>
